<!doctype html>
<html lang="en">

	<head>
		<meta charset="utf-8" />
		<title>忘记密码</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<meta content="A fully featured admin theme which can be used to build CRM, CMS, etc." name="description" />
		<meta content="Coderthemes" name="author" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />

		<!-- App favicon -->
		<link rel="shortcut icon" href="assets/images/favicon.ico">

		<!-- App css -->
		<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
		<link href="assets/css/icons.css" rel="stylesheet" type="text/css" />
		<link href="assets/css/metismenu.min.css" rel="stylesheet" type="text/css" />
		<link href="assets/css/style.css" rel="stylesheet" type="text/css" />
		<link rel="stylesheet" type="text/css" href="assets/css/custom.css"/>

		<script src="assets/js/modernizr.min.js"></script>

	</head>

	<body class="account-pages">

		<!-- Begin page -->
		<div class="wrapper-page account-page-full">

			<div class="card">
				<div class="card-block">

					<div class="account-box">

						<div class="card-box p-5">
							<h2 class="text-uppercase text-center pb-4">
                                <a href="index.html" class="text-success">
                                    <span><img src="assets/images/logo.png" alt="" height="26"></span>
                                </a>
                            </h2>

							<div class="text-center m-b-20">
								<p class="text-muted m-b-0">输入你的电子邮箱，我们会发送一封验证码邮件到你的邮箱，然后请你输入验证码以此验证你的身份 </p>
							</div>

							<form class="form-horizontal" action="#">

								<div class="form-group row m-b-20">
									<div class="col-12" id="email-valid">
										<label for="emailaddress">邮箱</label>
										<input class="form-control" type="text" id="email" name="email" placeholder="如：xxx@126.com">
									</div>
								</div>
								
								<div class="form-group row m-b-20">
									<div class="col-7">
										<label for="clientCode">验证码</label>
										<input class="form-control" type="text" id="clientCode" name="clientCode" placeholder="输入5位验证码">
									</div>
									<div class="col-5">
										<label for="">&nbsp;</label>
										<button class="btn btn-block btn-success waves-effect waves-light" id="valibtn" type="button" onclick="sendValidCode()">发送验证码</button>
									</div>
								</div>

								<div class="form-group row m-b-20">
									<div class="col-12">
										<label for="password">新密码</label>
										<input class="form-control" type="password" name="password" id="password" placeholder="请输入新密码">
									</div>
								</div>

								<div class="form-group row text-center m-t-10">
									<div class="col-12">
										<button class="btn btn-block btn-custom waves-effect waves-light" id="submit" type="submit">重设密码</button>
									</div>
								</div>

							</form>

							<div class="row m-t-50">
								<div class="col-sm-12 text-center">
									<p class="text-muted">回到 <a href="login.html" class="text-dark m-l-5"><b> 登录</b></a></p>
								</div>
							</div>

						</div>
					</div>

				</div>
			</div>

			<div class="m-t-40 text-center">
				<p class="account-copyright">2018 © Highdmin. - Coderthemes.com</p>
			</div>

		</div>

		<!-- jQuery  -->
		<script src="assets/js/jquery.min.js"></script>
		<script src="assets/js/bootstrap.bundle.min.js"></script>
		<script src="assets/js/metisMenu.min.js"></script>
		<script src="assets/js/waves.js"></script>
		<script src="assets/js/jquery.slimscroll.js"></script>

		<!-- App js -->
		<script src="assets/js/jquery.core.js"></script>
		<script src="assets/js/jquery.app.js"></script>
		<script src="assets/js/custom.js" type="text/javascript" charset="utf-8"></script>

		<!-- 表单验证 -->
		<script src="plugins/jquery.form.js/jquery.form.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="plugins/jquery.validation.1.14.0/jquery.validate.js" type="text/javascript" charset="utf-8"></script>
		<script src="plugins/jquery.validation.1.14.0/validate-methods.js" type="text/javascript" charset="utf-8"></script>
		<script src="plugins/jquery.validation.1.14.0/messages_zh.js" type="text/javascript" charset="utf-8"></script>
		<!-- bootstrap-select -->
		<script src="plugins/bootstrap-select/js/bootstrap-select.js" type="text/javascript" charset="utf-8"></script>

		<!-- layer插件 -->
		<script src="plugins/layer2.4/layer.js" type="text/javascript" charset="utf-8"></script>
		<!-- 星空背景 -->
		<script src="assets/js/background.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {

				//表单验证
				$("form").validate({
					rules: {
						clientCode: {
							required: true,
							number:true,
							maxlength: 5,
							minlength: 5,
						},
						email: {
							email: true,
							required: true,
						},
						password: {
							required: true,
						},
					},
					onkeyup: false,
					focusCleanup: true,
					success: "valid",
					submitHandler: function(form) {
						$(form).ajaxSubmit({
							type: "POST",
							url: "person/password/update",
							success: function(data) {
								parent.layer.msg('修改密码成功！，即将回到登录页面');
								setTimeout(function() {
									window.location.pathname = "login.html"
								}, 1000);

							},
							error: function(XMLHttpRequest, textStatus, errorThrown) {
								networkError(XMLHttpRequest, textStatus, errorThrown)
							}
						});
					}
				});
			});

			$("#email").blur(function() {
				//查看当前用户是否存在
				$.ajax({
					type: "POST",
					url: 'person/check/mail',
					async: false,
					dataType: "json",
					data:{"email":$("#email").val()},
					success: function(data) {
						if (data.status == 0) {
							label = $('<label id="err" class="error" for="email" style="">当前邮箱不存在！</label>')
							$("#email-valid").append(label)
							$("#submit").attr("disabled", true)
						}else{
							$("err").remove()
							$("#submit").removeAttr('disabled');
						}

					},
					error: function(XMLHttpRequest, textStatus, errorThrown) {
						networkError(XMLHttpRequest, textStatus, errorThrown)
					}
				});
			})

			function sendValidCode() {
				//发送验证码
				email = $("#email").val()
				if (email == "") {
					layer.msg("请输入邮箱！")
					return
				}
				$.ajax({
					type: "POST",
					url: 'person/send/mail',
					async: false,
					dataType: "json",
					data: {
						"email": email
					},
					success: function(data) {
						$("#valibtn").attr("disabled")
						var count = 60;
						const countDown = setInterval(function() {
							if (count === 0) {
								$("#valibtn").text('重新发送').removeAttr('disabled');
								clearInterval(countDown);
							} else {
								$("#valibtn").attr("disabled", true)
								$("#valibtn").text(count + '秒后可重新获取');
							}
							count--;
						}, 1000);
					},
					error: function(XMLHttpRequest, textStatus, errorThrown) {
						networkError(XMLHttpRequest, textStatus, errorThrown)
					}
				});
			}
		</script>
	</body>

</html>